<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="search" v-model="searchInpValue">

        <ul>
            <li class="header">
                <span>编号</span>
                <span>姓名</span>
                <span>年龄</span>
                <span>操作</span>
            </li>
            <li v-for="(item,index) in filterArr">
                <span>{{item.index}}</span>
                <span>{{item.name}}</span>
                <span>{{item.age}}</span>
                <span><button @click="deleteItem(item)">删除</button></span>

            </li>

            <!-- 分页条 -->

            <li class="page-btn"
                @click="chengePageIndex(item)"
                :class="{active:pageIndex === item}"
                v-for="(item,index) in total">{{item}}</li>

            <h1>{{total}}</h1>
            
            <li>
                <button @click="clear">清空</button>
            </li>
        </ul>
        <h1>添加</h1>
        姓名: <input v-model="userName" @keyup.enter="add" type="text">
        年龄: <input v-model="age" @keyup.enter="add" type="text">
        <button @click="add">添加</button>

        <!-- 找bug，解决他 -->
    </div>

    <script src="js/vue.js"></script>
    <script>
        let myApp = new Vue({
            el:'#app',
            data:{
                searchInpValue:'',
                userName:'',
                age:'',
                allArr:[],
                //当前在多少页
                pageIndex:1,
                //每页多少条
                pageSize:5
            },
            //当pageIndex变化的时候。从allArr中取分页数据，生成filterArr变量
            //allArr添加数据的时候
            computed:{
                filterArr(){
                    let start = (this.pageIndex - 1) * this.pageSize
                    let end = this.pageIndex * this.pageSize

                    return this.allArr.filter(item => {
                        return item.name.includes(this.searchInpValue)
                    }).slice(start,end)
                },
                total(){
                    let searchArr = this.allArr.filter(item =>{
                        return item.name.includes(this.searchInpValue)
                    })
                    return Math.ceil(searchArr.length / this.pageSize)
                }
            },
            watch:{
                search(){
                    this.pageIndex = 1
                },
                chengePageIndex(item){
                    this.pageIndex = item
                },
                add(){
                    this.allArr.push({
                        id:new Date().getTime(),
                        index:this.allArr.length + 1,
                        name:this.userName,
                        age:this.age
                    })
                    this.userName = ''
                    this.age = ''
                },
                deleteItem(item){
                    /*
                        {
                            age:''
                            id:1111111
                            index:7
                            name:'qqq'
                        }
                    
                    */
                   console.log(item)
                   //找到下标findIndex
                   let index = this.allArr.findIndex(allArrItem =>{
                       return item.id === allArrItem.id
                   })
                   console.log(index)
                   this.allArr.splice(index,1)
                   if(!this.filterArr.length && this.pageIndex > 1){
                       this.pageIndex = this.pageIndex - 1
                   }
                },
                clear(){
                    this.allArr = []
                    this.pageIndex = 1
                }
            }
        })
    </script>
</body>
</html>